<template>

  <div class="tabs">

    <ul class="lists">
      <li v-for="(item,index) in datalist" :key="index" :class="['list', active===index?'active':'']" @click="setActive(index)">
        {{ item.menuCname || item.empName + '-' + {0: '审核', 1: '查看',2: '填写'}[item.dealWay] }}
        <i class="close el-icon-close" @click.stop="remove(index)" />
      </li>
    </ul>

  </div>

</template>

<script>

export default {
  data() {
    return {
      active: 0,
      datalist: []
    }
  },
  watch: {
  },
  mounted() {
    this.datalist = this.$store.state.tab.tabArr
    this.active = this.$store.state.tabClick.whichTab || 0
  },
  methods: {
    getTapFallIn(item) {
      // setTab(item.menuCname)
      console.log(item, '酷酷酷')
      this.$store.commit('tab/UPDATE_TABARR', [item])
      if (item.menuEname === 'MT14000') {
        this.$message({
          type: 'info',
          message: '当前功能暂未开放'
        })
        return
      }
      if (item.menuEname === 'MT12000') {
        this.$http.post('/serviceAction/common', {
          'methodName': 'getReportHistoryId',
          'reportYear': this.year,
          'serviceName': 'MT01101'
        }).then((res) => {
          console.log(res)
          if (res.data.reportId !== null) {
            this.$router.push({
              path: '/viewIndex'
            })
          } else {
            this.$message({
              type: 'info',
              message: '您还没有编制"一人一表"，请先进行编制！'
            })
          }
        })
      } else if (item.menuEname === 'MT13000') {
        this.$http.post('/serviceAction/common', {
          'methodName': 'getReportId',
          'reportYear': this.year,
          'serviceName': 'MT01102'
        }).then((res) => {
          console.log(res)
          if (res.data.reportId !== null) {
            this.dialogRecord = true
            // this.$router.push({
            //   path: '/quarterIndex',
            //   query: {
            //     reportHistoryId: res.data.reportId + ''
            //   }
            // })
          } else {
            this.$message({
              type: 'info',
              message: '您还未有编制通过的"一人一表"，请先进行编制并提交审核！'
            })
          }
        })
      }
      if (item.menuEname === 'MT11000') {
        this.$http.post('/serviceAction/common', {
          'methodName': 'isSubmit',
          'reportYear': this.year,
          'serviceName': 'MT01101'
        }).then((res) => {
          if (res.isSuccess) {
            if (res.data === '1') {
              this.$router.push({
                path: '/mainTask',
                query: {
                  edit: '1'
                }
              })
            } else {
              this.$router.push({
                path: '/viewIndex',
                query: {
                  showBtn: '1'
                }
              })
            }
          }
        })
      }
    },
    setActive(index) {
      this.active = index
      if (this.datalist[index].dealWay === 0) {
        this.$router.push({
          path: '/reviewIndex',
          query: {
            reportHistoryId: this.datalist[index].reportHistoryId,
            empCode: this.datalist[index].empCode
          }
        })
      }
      this.getTapFallIn(this.datalist[index])
      console.log(this.datalist, index, this.datalist[index])
    },
    remove(index) {
      console.log(this.datalist.length > 1 && (this.datalist[index].empCode === this.$route.query.empCode), '触发删除')
      if (this.datalist.length > 1 && (this.datalist[index].empCode === this.$route.query.empCode)) {
        this.$store.commit('tab/REMOVE_TABARR', index)
        this.setActive(0)
      } else {
        this.$store.commit('tab/CLEAR_TABARR')
        this.$router.push({
          path: '/'
        })
      }
    }
  }
}

</script>

<style scoped lang="scss">
.tabs{
    font-size: 12px;
    background: #e0e3ec;
    height:40px;
    padding: 0 40px;
    .lists{
        overflow-x:auto;
        .list{
            float: left;
            width: 200px;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            line-height: 40px;
            position: relative;
            color: #222222;
            cursor: pointer;
            .close{
                position: absolute;
                right:10px;
                top:14px;
                font-size: 12px;
                color: #6D7585;
            }
            &::after{
                display: block;
                content:'';
                height:20px;
                width: 1px;
                position:absolute;
                right: 0px;
                top:10px;
                z-index: 3;
                border-right:1px solid #7E7E7E;
            }
        }
        .active{
            background: #fff;
            left:-1px;
            z-index: 3;
            border-radius: 8px 8px 0px 0px;
            &::after{
                height:0px;
            }
        }
    }
}
</style>>
